<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui" xmlns="http://www.w3.org/1999/xhtml"
	xml:lang="en" lang="en"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
	<h:outputScript library='javascripts'
		name="query.maskedinput-1.2.2.min.js" />
	<h:outputScript>

	</h:outputScript>
	<ui:composition template="/protegido/main.xhtml">
		<ui:define name='conteudoPrincipal'>

			<h:outputScript>
			
				var respostaText = "";
				function campoResposta(resposta) {
					if (resposta)
						respostaText = resposta;
					var opcoes = $("#opcoes").val();
					if (opcoes) {
						if (opcoes.trim != "") {
							var arrayOpcoes = opcoes.split("#");
							if (arrayOpcoes[0] == "")
								arrayOpcoes.shift();

							if (arrayOpcoes[arrayOpcoes.length - 1] == "") {
								arrayOpcoes.pop();
							}
							console.log(arrayOpcoes);
							var selectOpcoes = document.getElementById("respostaSelect");
							if (!selectOpcoes) {
								selectOpcoes = document.createElement("select");
								selectOpcoes.id = "respostaSelect";
							}
							$('#respostaSelect').empty();
							
							var elementOpcao;
							for (var i=0; arrayOpcoes.length  > i; i++){
								arrayOpcoes[i] = arrayOpcoes[i].replace(/^\s+|\s+$/g,"");
								console.log("t"+arrayOpcoes[i]);
								elementOpcao = document.createElement("option");
								elementOpcao.innerHTML = arrayOpcoes[i];
								elementOpcao.value = arrayOpcoes[i];
								if ( respostaText == arrayOpcoes[i]){
									elementOpcao.selected = true;
								}
								selectOpcoes.appendChild(elementOpcao);
							}

							selectOpcoes.name = 'respostaSelect';
							selectOpcoes.className += ' select';
							selectOpcoes.required = true;
							selectOpcoes.style.width = "100%";
							var d = document.getElementById('respostaContainer');
							if (d) {
								d.appendChild(selectOpcoes);
								$("#respostaTextArea").hide('slow', function() {
									$("#respostaTextArea").remove();
								});
							}
							
						}
					} else {
						console.log("test");
						$("#respostaSelect").remove();
						$("#respostaTextArea").remove();
						var textArea;
						textArea = document.createElement("textarea");
						textArea.id = 'respostaTextArea';
						textArea.name = 'respostaTextArea';
						textArea.val = respostaText;
						var d = document.getElementById('respostaContainer');
						if (d) {
							d.appendChild(textArea);
						}
					}
				
				}
				$(document).ready(function() {
					$("#navigation li.questoesProf a").addClass("active");
					$("#navigation li").parent().find('li').removeClass("active");
					if ($("#questoesProf")){
						$("#questoesProf").addClass("active");
					}
					campoResposta('');
					$("#opcoes").blur(campoResposta(''));
				});
			</h:outputScript>
			<style type="text/css" media="screen">
form {
	height: auto;
}

form .item-passos {
	font-size: 18px;
	margin-bottom: 15px;
	padding-bottom: 0px;
}

#campos-enunciado {
	width: 28%;
	min-height: inherit;
	height: inherit;
	overflow: hidden;
	float: left;
	padding-right: 15px;
	margin-left: 15px;
	margin-bottom: 15px;
}

#campos-resposta {
	width: 28%;
	min-height: inherit;
	margin-left: 30px;
	min-height: 485px;
	height: inherit;
	overflow: hidden;
	float: left;
	border-left: 1px solid #dfdfdf;
	padding-left: 20px;
	margin-right: 30px;
	margin-bottom: 15px;
}

#campos-especificos {
	width: 28%;
	min-height: inherit;
	margin-left: 0px;
	min-height: 485px;
	height: inherit;
	overflow: hidden;
	float: left;
	border-left: 1px solid #dfdfdf;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 15px;
}

form input[type="text"],form input[type="password"] {
	width: 230px;
}

form input.w30 {
	width: 30px;
}

form input.w80 {
	width: 75px;
}

form span {
	font-size: 10px;
	color: #666;
	margin-left: 5px;
}

form span a {
	font-size: 10px;
	font-weight: bold;
	color: red;
}

form input.w120 {
	width: 175px;
}

form .input-submit {
	text-align: right;
	margin-top: 30px;
}

.campo-form {
	margin-top: 5px;
	margin-left: 20px;
}

#sim *,#nao *,#showEnunciadoImg * {
	border: none !important;
	padding: 0 !important;
	font-weight: normal;
}

#sim *,#nao * {
	font-weight: normal;
	display: inline-block;
	width: 50%;
}

#showEnunciadoImg {
	width: 95%;
	text-align: center;
	margin-left: 40px;
	margin-bottom: 10px;
}

#botao label:hover {
	text-decoration: underline;
	background-color: rgba(0, 0, 0, 0.5);
}

#botao label {
	border: 0;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
	color: #000;
	cursor: pointer;
	vertical-align: middle;
	background-color: #a11e06;
}

#botao label,#botao * {
	color: #fff !important;
}

.fileupload-buttonbar {
	padding: 0em 0em;
	width: 147px;
	text-align: right;
}

.ui-button-text-icon-left .ui-button-text {
	padding: .5em 1em .4em 2em;
	border: none;
}
</style>

			<div class="ui-widget">
				<h:messages id="msg"
					style="font-size: 12px; margin-top: 20px; margin-bottom: 20px; padding: 10px 0.7em;"
					class="ui-state-error ui-corner-all" />
			</div>

			<h2>Cadastrar Nova Questão</h2>
			<h:form id="novoQuestao" prependId="false">
				<div id="campos-enunciado">
					<div class="item-passos">.: Dados da Pergunta</div>

					<div class="campo-form">
						<label for="enunciadoText">Enunciado:</label><br />
						<br />
						<h:inputTextarea type="text" name="enunciadoText" class="text"
							value="#{enunciadoText}" id="enunciadoText" />
					</div>
					<br />
					<div class="campo-form">
						<label for="showEnunciadoImg">Mostrar imagem no
							Enunciado:*</label><br />
						<h:selectOneRadio id="showEnunciadoImg"
							value="#{showEnunciadoImage}" style="text-align:center;"
							required="true">
							<f:selectItem id="sim" itemLabel="Sim" itemValue="true" />
							<f:selectItem id="nao" itemLabel="Não" itemValue="false" />
						</h:selectOneRadio>
					</div>
					<div class="campo-form" style="text-align: center;">
						<p:graphicImage style="text-align:center;"
							value="#{questaoMB.enunciadoImg}" id="imagemEnunciado"
							cache="false" width="150px" height="120px" />
						<br /> <span>Formatos permitidos: gif, jpeg e png</span><br /> <span>
							Tamanho max.: 3MB</span><br />
						<div style="margin-top: 5px;">
							<p:fileUpload id="botao"
								style="display:inline-block; text-align:center;"
								sizeLimit="3145728" widgetVar="uploader"
								label="Escolher imagem..."
								fileUploadListener="#{questaoMB.fileUpload}" auto="true"
								allowTypes="/(\.|\/)(gif|jpe?g|png)$/" update="imagemEnunciado"
								multiple="false" customUI="false">
							</p:fileUpload>
						</div>

					</div>
				</div>
				<div id="campos-resposta">
					<div class="item-passos">.: Dados da Resposta</div>
					<div class="campo-form">
						<label for="opcoes">Opções: </label><br /> <span>Exemplo:#Opcao
							1 #Opcao 2 #Opcao 3...</span> <br />

						<h:inputTextarea type="text" name="opcoes" class="text"
							value="#{opcoes}" id="opcoes"
							onblur="campoResposta(#{(respostaText) ? respostaText : ''});" />

					</div>
					<br />
					<div class="campo-form">
						<label for="reposta">Resposta: *</label><br />
						<br />
						<div id="respostaContainer"></div>

					</div>
				</div>

				<div id="campos-especificos">
					<div class="item-passos">.: Dados Específicos</div>
					<div class="campo-form">
						<label for="temas">Tema(s): * </label><br /> <span>Exemplo:#Tema1
							#Tema2 #tema3...</span> <br />
						<h:inputTextarea type="text" name="temas" class="text"
							value="#{temas}" id="temas" required="true" />
					</div>
					<br />
					<div class="campo-form">
						<label for="nDificuldade">Nível Dificuldade: *</label><br /> <span>Valor
							Min.= 0</span> <br />
						<p:spinner id="nDificuldade" name="nDificuldade" min="0" max="10"
							style="margin-left:0px; margin-top:8px; text-align:left;"
							value="#{nivelDificuldade}" required="true" />
					</div>

				</div>

				<div class="clearfix"></div>

				<p class="campo-form">
					<span>Todos os campos com o sinal * são obrigatórios</span> <br />
					<h:commandButton type="submit" name="salvar" class="submit"
						value="Salvar Alterações" id="salvar"
						action="#{questaoMB.doSalvarQuestao(enunciadoText,showEnunciadoImage,opcoes,temas,nivelDificuldade)}"
						update=":msg :novoQuestao" onclick="this.value='Salvando... ';">
					</h:commandButton>
					<h:commandButton type="submit" name="cancelar" class="submit"
						style="min-width:109px;" value="Cancelar" id="cancelar"
						action="#{questaoMB.doCancelar()}" immediate="true"
						process="@none">
					</h:commandButton>
				</p>
			</h:form>
		</ui:define>
	</ui:composition>
</h:body>
</html>